<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>ECharts 折线图</title>
        <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
        <style>
            #main {
                width: 600px;
                height: 400px;
            }
        </style>
    </head>
    <body>
        <div id="main"></div>
        <script>
            var myChart = echarts.init(document.getElementById("main"));
            var option = {
                grid: {
                    left: "3%",
                    right: "4%",
                    bottom: "3%",
                    top: "3%",
                    containLabel: true,
                },
                xAxis: {
                    type: "category",
                    boundaryGap: false,
                    data: [
                        "01.13",
                        "01.14",
                        "01.15",
                        "01.16",
                        "01.17",
                        "01.18",
                        "01.19",
                    ],
                    axisLine: {
                        lineStyle: {
                            color: "#E5E5E5",
                        },
                    },
                },
                yAxis: {
                    type: "value",
                    axisLine: {
                        show: false,
                    },
                    splitLine: {
                        lineStyle: {
                            color: "#E5E5E5",
                        },
                    },
                },
                series: [
                    {
                        name: "次数",
                        type: "line",
                        data: [5.5, 11, 2.3, 0.8, 1.5, 11.5, 14],
                        smooth: true,
                        symbol: "circle",
                        symbolSize: 6,
                        lineStyle: {
                            color: "rgb(0, 153, 127)",
                        },
                        itemStyle: {
                            color: "rgb(0, 153, 127)",
                        },
                        areaStyle: {
                            color: {
                                type: "linear",
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: "rgba(0, 153, 127, 0.2)",
                                    },
                                    {
                                        offset: 1,
                                        color: "rgba(0, 153, 127, 0)",
                                    },
                                ],
                            },
                        },
                    },
                    {
                        name: "人数",
                        type: "line",
                        data: [1.5, 5.5, 2.3, 0.5, 0.8, 6.5, 2.2],
                        smooth: true,
                        symbol: "circle",
                        symbolSize: 6,
                        lineStyle: {
                            color: "#007AFF",
                        },
                        itemStyle: {
                            color: "#007AFF",
                        },
                        areaStyle: {
                            color: {
                                type: "linear",
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: "rgba(0, 122, 255, 0.2)",
                                    },
                                    {
                                        offset: 1,
                                        color: "rgba(0, 122, 255, 0)",
                                    },
                                ],
                            },
                        },
                    },
                ],
                tooltip: {
                    trigger: "axis",
                    backgroundColor: "rgba(255, 255, 255, 0.9)",
                    borderColor: "#E5E5E5",
                    borderWidth: 1,
                    textStyle: {
                        color: "#333",
                    },
                    axisPointer: {
                        type: "line",
                        lineStyle: {
                            color: "#E5E5E5",
                        },
                    },
                },
                legend: {
                    data: ["次数", "人数"],
                    bottom: "0%",
                    icon: "circle",
                    itemWidth: 8,
                    itemHeight: 8,
                    textStyle: {
                        color: "#666",
                    },
                },
            };
            myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize();
            });
        </script>
    </body>
</html>
